<template>
  <div id="tszcProject"/>
</template>

<script>

//自定义图片
export default {
  name: "tszcProject",
  data(){
    return {

      nameMap: '平凉市',

    }
  },
  mounted() {
    let h = document.body.clientHeight;
    document.getElementById("tszcProject").style.height = 30.66 + "vh";

    this.initDom();
  },
  methods: {

    /**
     * 地图初始化
     */
    initDom: function () {
      //基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('tszcProject'), 'light');
      let self = this;
      //点击后的企业放在这
      let deviceData = self.deviceData;
      //=======>>点击事件<<========
      myChart.on('click', function(e) {
        console.log(`点击了`,e)

      });

    //---------------------------
      const pieData = [
        {
          name: "楼宇负荷",
          value: Math.floor(Math.random() * 100 + 100),
        },
        {
          name: "微网",
          value: Math.floor(Math.random() * 100 + 100),
        },
        {
          name: "储能",
          value: Math.floor(Math.random() * 100 + 100),
        },
        {
          name: "灵活调节电源",
          value: Math.floor(Math.random() * 100 + 100),
        },
        {
          name: "综合能源",
          value: Math.floor(Math.random() * 100 + 100),
        },
      ];
      const total = pieData.reduce((a, b) => {
        return a + b.value;
      }, 0);
      let seriesData = [];
      pieData.forEach(r => {
        seriesData.push(r);
        seriesData.push({
          name: "",
          value: 15,
          tooltip: { show: false },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            color: "rgba(0, 0, 0, 0)",
            borderColor: "rgba(0, 0, 0, 0)",
            borderWidth: 0,
          },
        });
      });
      let  option = {
        color: ["#96B5FC", "#5F8CEF", "#F18A70", "#F4C594", "#E0E7FA"],
        backgroundColor: "#011d3900",
        title: {
          text: `{a|${total}}{b| 台}`,
          textStyle: {
            rich: {
              a: {
                color: "#FFFFFF",
                fontSize: '28',
              },
              b: {
                fontSize: '16',
                color: "#FFFFFF",
              },
            },
          },
          x: "43%",
          y: "48%",
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "交易品种收益",
            type: "pie",
            radius: ["50%", "55%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              position: "outside",
              color: "#E6F7FF",
              lineHeight: 18,
              formatter: params => {
                const { data } = params;
                return data.name ? `${data.name}\n${data.value}MW` : "";
              },
            },
            itemStyle: {
              borderColor: "transparent",
            },
            emphasis: {
              scaleSize: 10,
            },
            data: seriesData,
          },
          {
            name: "阴影圈",
            type: "pie",
            radius: ["0", "40%"],
            center: ["50%", "50%"],
            emphasis: {
              scale: false,
            },
            tooltip: {
              show: false,
            },
            itemStyle: {
              color: "rgba(204,225,255, 0.05)",
            },
            zlevel: 4,
            labelLine: {
              show: false,
            },
            data: [100],
          },
          {
            name: "阴影圈",
            type: "pie",
            radius: ["0", "30%"],
            center: ["50%", "50%"],
            emphasis: {
              scale: false,
            },
            tooltip: {
              show: false,
            },
            itemStyle: {
              color: "rgba(204,225,255, 0.07)",
            },
            zlevel: 4,
            labelLine: {
              show: false,
            },
            data: [100],
          },
        ],
      };



    //-------------------------------




      // 绘制图表
      myChart.setOption(option);
      //====>监听窗口变化 三种方式<====
      //自适应2
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    /**
     * 适配文字大小
     */
    fontSize(res){
      let docEl = document.documentElement,
          clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = 100 * (clientWidth / 1440);
      return res*fontSize;
    },


  }
}


</script>

<style scoped>
#tszcProject {
  height: 100px;
  width: 100%;
}
</style>
